<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>My Country - Pay My Bill</title>
    <link href="includes/css/normalize.min.css" type="text/css" rel="stylesheet"/>
    <link href="includes/css/main.css" type="text/css" rel="stylesheet"/>
    <link href="includes/css/smoothness/jquery-ui-1.9.1.custom.min.css" type="text/css" rel="stylesheet"/>
    <script src="includes/js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="includes/js/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>  
    
    <script type="text/javascript">
      $(function(){
        $("#payFullAmount").click(function(){
          $("#paymentAmount").val($(this).val());
        });
        
        $("#payOtherAmount").click(function(){
          $("#paymentAmount").val($(this).val());
        });   
        
        $("#paymentBtn").button({icons :{primary : "ui-icon-circle-check"}});
        
      });
    </script>
    
  </head>
  <body>

    <ul>
      <li class="header propertyHeading">Pay My Bill</li>
      <li>
        <ul class="list">
          <li class="item">
            <ul>
              <li><span class="_property"></span><span class="largeLabel">Billing Account - 2163660</span></li>
              <li>
                <table id="payBillInfo">
                  <tr>
                    <td class="label">Billing name & address:</td>
                    <td>John and Mary Smith<br/>1234 S Oak St <br/>Bloomington, IL 61704-1508</td>
                  </tr>
                  <tr>
                    <td class="label">Billing frequency:</td>
                    <td>Semi-Annual</td>
                  </tr>
                  <tr>
                    <td class="label">Last amount paid:</td>
                    <td>$446.49 received on 11/05/2011</td>
                  </tr>                  
                  <tr>
                    <td class="label">Current amount due:</td>
                    <td>$450.24 due by 11/17/2012</td>
                  </tr>

                 
                </table>
              </li>
            </ul>
          </li>
          
          
          <li class="item" style="padding-top: 20px;">
            <ul>
              <li><span class="_property"></span><span class="largeLabel">Payment information</span></li>

              <form id="paymentForm">
                <fieldset>
                  <div class="formRow">
                    <input type="radio" name="amount" id="payFullAmount" checked value="$450.24"/> <label for="payFullAmount" class="inline">Pay the full amount ($450.24) </label> <br/>
                  </div>
                  <div class="formRow">                    
                    <input type="radio" name="amount" id="payOtherAmount" value="" /> <label  for="payOtherAmount" class="inline">Pay other amount</label> 
                  </div>
                  <div class="formRow">
                    <label for="paymentAmount">Amount:</label>
                    <input type="text" id="paymentAmount" name="paymentAmount" value="$450.24" />
                  </div>
                  <div class="formRow">
                    <label for="creditCard">Credit card number:</label>
                    <input type="text" id="creditCard" name="creditCard" value="" />                    
                  </div>                  

                  <div class="formRow">
                    <label for="securityDigits">Security digits:</label>
                    <input type="text" id="securityDigits" name="securityDigits" value="" size="3" />                    
                  </div                  
                  
                  <div class="formRow">
                    <label for="expirationDate">Expiration date:</label>
                    <input type="text" id="expirationDate" name="expirationDate" value="" placeholder="mm/yy" size="3" />                    
                  </div>     
                  
                  <div class="formRow">
                  <button id="paymentBtn">Make payment</button>                                    
                  </div>
                  
                  <div class="formRow" style="margin-top:20px;">
                    <label>Accepted credit cards</label>
                    <img src="images/credit_card_icons.jpg" alt="Accepted credit cards"/>                    
                  </div>
                  
                </fieldset>
              </form>
              
            </ul>
          </li>          

        </ul>
      </li>



    </ul>

  </body>
</html>
